<template>
  <div class="app-container" ref="container">
    <!-- 固定的搜索和工具栏容器 -->
    <div class="fixed-header">
      <!-- 搜索栏 -->
      <div class="search-bar">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="支付状态">
            <el-select v-model="formInline.pay" placeholder="全部" clearable>
              <el-option label="已付款" value="1"></el-option>
              <el-option label="未付款" value="2"></el-option>
              <el-option label="待支付" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单号">
            <el-input v-model="formInline.code" placeholder="请输入订单号" clearable></el-input>
          </el-form-item>
          <el-form-item label="用户账号">
            <el-input v-model="formInline.uid" placeholder="请输入用户账号" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查 询</el-button>
            <el-button @click="resetQuery">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 工具栏 -->
      <div class="toolbar-right">
        <el-button
            type="primary"
            size="small"
            @click="handleExport"
            :loading="downloadLoading">
          <i class="el-icon-download"></i> 导出
        </el-button>
        <el-button size="small" @click="handleRefresh">
          <i class="el-icon-refresh"></i> 刷新
        </el-button>
      </div>
    </div>

    <!-- 表格内容区域 -->
    <div class="table-container">
      <!-- 表格和分页容器 -->
      <div class="content-container">
        <el-table
            v-loading="loading"
            :data="orderList"
            border
            style="width: 100%"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="code" label="订单号" width="180">
            <template slot-scope="scope">
              <el-link type="primary" @click="copyText(scope.row.code)">{{ scope.row.code }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="recharge" label="支付类型" width="120">
            <template slot-scope="scope">
              <el-tag :type="scope.row.recharge === 1 ? 'success' : 'danger'">
                {{ scope.row.recharge === 1 ? 'alipay_app' : 'wxpay_app' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="pay" label="支付状态" width="120">
            <template slot-scope="scope">
              <el-tag :type="scope.row.pay === 1 ? 'success' : (scope.row.pay === 2 ? 'danger' : (scope.row.pay === 3 ? 'warning' : 'info'))">
                {{ scope.row.pay === 1? '已支付' : (scope.row.pay === 2? '未支付' : (scope.row.pay === 3? '待支付' : '未知状态')) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="uid" label="用户账号" width="150"></el-table-column>
          <el-table-column prop="amount" label="获得汪汪币" width="100"></el-table-column>
          <el-table-column prop="maketime" label="创建时间" width="180"></el-table-column>
          <el-table-column prop="paytime" label="支付时间" width="180"></el-table-column>
          <el-table-column prop="content" label="备注" width="100"></el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  v-if="scope.row.payStatus === '0'"
                  @click="handleComplete(scope.row)"
              >完成支付</el-button>
              <el-button
                  size="mini"
                  type="text"
                  @click="handleDetail(scope.row)"
              >详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryParams.pageNo"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="queryParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入 xlsx
import * as XLSX from 'xlsx'

export default {
  name: 'PayView',
  data() {
    return {
      loading: false,
      total: 0,
      orderList: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      formInline: {
        typename: 1
      },
      downloadLoading: false, // 添加导出加载状态
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.axios.post(`http://localhost:9999/api-tagclass-service/pay/paylist?pageNo=${this.queryParams.pageNo}&pageSize=${this.queryParams.pageSize}`, this.formInline).then(res => {
        this.orderList = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      // 重置查询表单
      this.formInline = {}
      // 重置分页参数
      this.queryParams = {
        pageNo: 1,
        pageSize: 10
      }
      // 清空选中项（如果有使用表格多选的话）
      if (this.$refs.table) {
        this.$refs.table.clearSelection()
      }
      // 重新加载数据
      this.getList()
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.queryParams.pageNo = val
      this.getList()
    },
    // 导出功能
    handleExport() {
      this.downloadLoading = true
      // 创建一个新的查询参数，不包含分页
      const exportParams = { ...this.formInline }

      // 调用接口获取所有数据
      this.axios.post('http://localhost:9999/api-tagclass-service/pay/paylist?pageNo=1&pageSize=999999', exportParams)
          .then(res => {
            const list = res.data.data.list

            // 转换数据格式
            const exportData = list.map(item => ({
              'ID': item.id,
              '订单号': item.code,
              '支付类型': item.recharge === 1 ? 'alipay_app' : 'wxpay_app',
              '支付状态': item.pay === 1 ? '已支付' : (item.pay === 2 ? '未支付' : (item.pay === 3 ? '待支付' : '未知状态')),
              '用户账号': item.uid,
              '获得汪汪币': item.amount,
              '创建时间': item.maketime,
              '支付时间': item.paytime,
              '备注': item.content
            }))

            // 创建工作簿
            const worksheet = XLSX.utils.json_to_sheet(exportData)
            const workbook = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(workbook, worksheet, '支付订单列表')

            // 设置列宽
            const colWidth = [
              { wch: 8 }, // ID
              { wch: 20 }, // 订单号
              { wch: 12 }, // 支付类型
              { wch: 10 }, // 支付状态
              { wch: 15 }, // 用户账号
              { wch: 12 }, // 获得汪汪币
              { wch: 20 }, // 创建时间
              { wch: 20 }, // 支付时间
              { wch: 15 }, // 备注
            ]
            worksheet['!cols'] = colWidth

            // 导出文件
            XLSX.writeFile(workbook, `支付订单列表_${new Date().toLocaleDateString()}.xlsx`)
            this.$message.success('导出成功')
          })
          .catch(error => {
            this.$message.error('导出失败：' + error.message)
          })
          .finally(() => {
            this.downloadLoading = false
          })
    },
  }
}
</script>

<style scoped>
/* 使用与小说列表页面相同的样式 */
.app-container {
  padding: 0;
  background-color: #fff;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.fixed-header {
  position: fixed;
  top: 50px;
  left: 210px;
  right: 0;
  background-color: #fff;
  z-index: 999;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

.search-bar {
  flex: 1;
}

.toolbar-right {
  margin-left: 20px;
}

.table-container {
  margin-top: 70px;
  padding: 0 20px;
}

.content-container {
  background-color: #fff;
  border-radius: 4px;
  width: 100%;
  overflow-x: hidden;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
  padding: 10px 0;
}

.el-table {
  margin-bottom: 20px;
}

.el-link {
  font-size: 12px;
}

::-webkit-scrollbar {
  display: none;
}

.demo-form-inline .el-form-item {
  margin-bottom: 0;
  margin-right: 20px;
}

.demo-form-inline .el-form-item:last-child {
  margin-right: 0;
}
</style>
